<template>
  <div class="page-content">
    <el-card class="Table">
      <template #header>
        <div class="header">
          <h3>{{ title }}列表</h3>
          <div class="btns">
            <el-button type="primary" icon="el-icon-circle-plus-outline"
              >新增{{ title }}</el-button
            >
          </div>
        </div>
      </template>
      <!-- 主要展示区域 -->
      <div class="content">
        <MyTable
          v-bind="tableConfig"
          :prop-list="tableConfig.propList"
          :data-list="dataList"
          @selectionChange="selectionChange"
        >
          <template #enable="{ row }">
            <el-button
              size="mini"
              :type="row.enable === 1 ? 'success' : 'danger'"
              plain
              >{{ row.enable ? '启用' : '禁用' }}
            </el-button>
          </template>
          <template #createAt="{ row }">
            {{ $filters.formatUtcString(row.createAt) }}
          </template>
          <template #updateAt="{ row }">
            {{ $filters.formatUtcString(row.updateAt) }}
          </template>
          <template #handle>
            <el-table-column
              align="center"
              label="操作"
              width="180"
              class="handle-btns"
            >
              <el-button icon="el-icon-edit" type="primary" size="mini"
                >编辑</el-button
              >
              <el-button icon="el-icon-delete" type="danger" size="mini"
                >删除</el-button
              >
            </el-table-column>
          </template>
          <template #footer>
            <div class="footer">
              <el-pagination
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="sizeChange"
              >
              </el-pagination>
            </div>
          </template>
        </MyTable>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import MyTable from '@/base-ui/table'
import { useStore } from 'vuex'
import { PropType } from '@vue/runtime-core'
import { computed } from '@vue/reactivity'
const store = useStore()
const props = defineProps({
  tableConfig: {
    type: Object,
    required: true
  },
  pageInfo: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    default: '列表'
  }
})

// 请求用户列表
store.dispatch('system/getPageListAction', props.pageInfo)
// 获取用户列表
const dataList = computed(() =>
  store.getters[`system/pageListData`](props.pageInfo.pageName)
)
// 获取用户列表页数
const dataCount = computed(
  () => store.state.system[props.pageInfo.pageName + 'Count']
)
// 保存复选框的状态组
let userStatus: any[] = []
const selectionChange = (selection: any[]) => {
  userStatus = selection
}

// 当前展示数据条数变化时
const sizeChange = () => {}
</script>

<style scoped lang="less">
.footer {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.Table {
  margin-top: 20px;
}
.header {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
